import { NavLink } from "react-router-dom";
import { Menu } from "antd";

function TopNavigator(){

    // 采用类似于 Vue 中定义路由记录的方式定义一个数组
    const routeRecords = [
        { path: '/' , name: 'root' , text: '首页' },
        { path: '/class/add' , name: 'add' , text: '添加' },
        { path: '/class/list' , name: 'list' , text: '列表' }
    ];

    // 将 routeRecords 数组中每个元素 映射成 MenuItemType 对象
    const menuItems = routeRecords.map( (recored) => {
        return { 
        key: recored.name , 
        label: <NavLink to={ recored.path }>{ recored.text }</NavLink> 
        }
    });

    return (
        <Menu theme="dark" mode="horizontal" items={ menuItems }/>
    )
}

export default TopNavigator;